<template>
	<div class="view">
		<div class="logo-panel"><img :src="logo" alt=""></div>
		<div class="menu-panel">
			<ul class="ul-panel">
				<li class="menu-item" v-for="(item, index) in menuList" :key="index" @click="clickActive(item, index)" :class="{'active-link': currentIndex === index}">
					<img :src="item.menuImage">
					<p>{{item.menuText}}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import $ from 'jquery'
export default {
	data() {
		return {
			logo: '',
			menuList: [
				{
					menuImage: require('@/assets/movie.png'),
					menuText: '影厅开厅',
					menuUrl: 'XMoviePage'
				},
				{
					menuImage: require('@/assets/reserve.png'),
					menuText: '影厅预定',
					menuUrl: 'XReservePage'
				},
				{
					menuImage: require('@/assets/goods.png'),
					menuText: '卖品销售',
					menuUrl: 'XGoodsPage'
				},
				{
					menuImage: require('@/assets/member.png'),
					menuText: '注册充值',
					menuUrl: 'XMemberPage',
					menuChild: 'XMemberDetailPage'
				},
				{
					menuImage: require('@/assets/save.png'),
					menuText: '客存管理',
					menuUrl: 'XSavePage',
					menuChild: 'XSaveDetailPage'
				},
				{
					menuImage: require('@/assets/order.png'),
					menuText: '最近订单',
					menuUrl: 'XOrderPage',
				}
			]
		}
	},
	mounted() {
		
	},
	computed: {
		currentIndex() {
			for (var i = 0; i < this.menuList.length; i++) {
				let route = this.$route.name;
				let item  = this.menuList[i];
				if (route == item.menuUrl || route == item.menuChild) {
					return i;
				}
			}
			return 0
		}
	},
	methods : {
		clickActive(item, index) {
			this.$router.push({
				name: item.menuUrl
			})
		}
	}
}
</script>

<style lang="less" scoped>
.view {
	width: 14.4rem;
	height: .7rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	.logo-panel {
		width: 1.29rem;
		height: .5rem;
		margin-right: .3rem;
		margin-left: .3rem;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.menu-panel {
		.ul-panel {
			width: 100%;
			height: 100%;
			display: flex;
			.menu-item {
				display: flex;
				align-items: center;
				padding: .1rem .2rem;
				font-size: .14rem;
				cursor: pointer;
				img {
					float: left;
					width: .3rem;
					height: .3rem;
				}
				p {
					float: left;
					color: #fff;
					margin-left: .05rem;
					font-size: .14rem;
				}
				&:nth-of-type(3) {
					img {
						height: .35rem;
					}
				}
				&:last-of-type {
					img {
						width: .35rem;
						height: .35rem;
					}
				}
			}
		}
	}
	.active-link {
		background: rgba(255,255,255,0.3);
		border-radius: .05rem;
	}
}

</style>